<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼图小游戏</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义配置和样式 -->
    <script src="tailwind.config.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen font-game text-slate-800">
<header class="w-full bg-white/80 backdrop-blur-sm shadow-sm py-3 px-4">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center gap-3">
        <h1 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-primary flex items-center">
            <i class="fa fa-puzzle-piece mr-2 text-accent"></i>
            拼图小游戏
        </h1>
        <div class="flex flex-wrap gap-2 justify-center">
            <div class="flex items-center bg-white rounded-lg shadow px-2 py-1.5 border border-slate-200">
                <label for="puzzle-size" class="text-slate-700 mr-2 text-sm">难度：</label>
                <select id="puzzle-size" class="border-none focus:ring-0 text-primary font-medium text-sm">
                    <option value="2">2×2</option>
                    <option value="3" selected>3×3</option>
                    <option value="4">4×4</option>
                    <option value="5">5×5</option>
                    <option value="6">6×6</option>
                </select>
            </div>
            <button id="reset-btn" class="bg-primary hover:bg-primary/90 text-white px-3 py-1.5 rounded-lg shadow transition-all flex items-center gap-1.5 text-sm">
                <i class="fa fa-refresh"></i>
                <span>重新开始</span>
            </button>
            <button id="hint-btn" class="bg-accent hover:bg-accent/90 text-white px-3 py-1.5 rounded-lg shadow transition-all flex items-center gap-1.5 text-sm">
                <i class="fa fa-lightbulb-o"></i>
                <span>提示</span>
            </button>
        </div>
    </div>
</header>

<main class="container mx-auto px-4 py-5">
    <!-- 原图预览 - 缩小尺寸 -->
    <div class="mb-5 max-w-md mx-auto">
        <h2 class="text-lg font-semibold mb-2 text-center">目标图案</h2>
        <div class="flex justify-center gap-2">
            <button id="view-original-btn" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg shadow transition-all flex items-center gap-2">
                <i class="fa fa-eye"></i>
                <span>查看原图</span>
            </button>
            <button id="upload-image-btn" class="bg-accent hover:bg-accent/90 text-white px-4 py-2 rounded-lg shadow transition-all flex items-center gap-2">
                <i class="fa fa-upload"></i>
                <span>上传图片</span>
            </button>
            <input type="file" id="image-upload" accept="image/*" class="hidden">
        </div>
    </div>

    <!-- 游戏区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <!-- 左侧：闲置区 -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-md p-4 h-full">
                <h2 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fa fa-box mr-2 text-neutral"></i>
                    拼图块
                </h2>
                <div id="pieces-container" class="min-h-[200px] grid grid-cols-2 sm:grid-cols-3 gap-3 content-start">
                    <!-- 拼图块将在这里生成 -->
                </div>
            </div>
        </div>

        <!-- 右侧：答题区 -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-md p-4 h-full">
                <h2 class="text-lg font-semibold mb-3 flex items-center">
                    <i class="fa fa-check-square-o mr-2 text-secondary"></i>
                    拼图区域
                </h2>
                <div id="puzzle-board" class="w-full aspect-square max-w-md mx-auto border-2 border-slate-200 rounded-lg relative">
                    <!-- 拼图槽位将在这里生成 -->
                </div>
                <div class="mt-4 grid grid-cols-3 gap-3 text-center">
                    <div class="bg-slate-50 p-2 rounded-lg">
                        <p class="text-xs text-slate-500">用时</p>
                        <p id="timer" class="text-xl font-bold text-primary">00:00</p>
                    </div>
                    <div class="bg-slate-50 p-2 rounded-lg">
                        <p class="text-xs text-slate-500">已放置</p>
                        <p id="placed-count" class="text-xl font-bold text-secondary">0/<span id="total-pieces">0</span></p>
                    </div>
                    <div class="bg-slate-50 p-2 rounded-lg">
                        <p class="text-xs text-slate-500">正确数</p>
                        <p id="correct-count" class="text-xl font-bold text-secondary">0/<span id="correct-total">0</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 胜利提示 -->
<div id="win-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-2xl p-6 max-w-md w-full mx-4 transform transition-all"> <!-- 移除了 animate-bounce 类 -->
        <div class="text-center">
            <div class="text-5xl text-yellow-500 mb-3">
                <i class="fa fa-trophy"></i>
            </div>
            <h2 class="text-xl font-bold mb-2">恭喜完成挑战！</h2>
            <p class="text-slate-600 mb-4">你成功拼出了完整图案</p>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div class="bg-slate-50 p-2 rounded-lg">
                    <p class="text-xs text-slate-500">用时</p>
                    <p id="final-time" class="text-lg font-bold text-primary">00:00</p>
                </div>
                <div class="bg-slate-50 p-2 rounded-lg">
                    <p class="text-xs text-slate-500">总块数</p>
                    <p id="final-pieces" class="text-lg font-bold text-secondary">0</p>
                </div>
            </div>
            <button id="play-again" class="bg-primary hover:bg-primary/90 text-white px-5 py-2 rounded-lg shadow transition-all w-full font-medium">
                再玩一次
            </button>
        </div>
    </div>
</div>

<!-- 原图查看模态框 -->
<div id="image-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="max-w-2xl w-full mx-4">
        <button id="close-image" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300">
            <i class="fa fa-times"></i>
        </button>
        <img src="picture.png" alt="完整原图" class="max-h-[80vh] mx-auto rounded-lg shadow-lg">
    </div>
</div>

<footer class="mt-6 py-4 bg-white/80 backdrop-blur-sm text-center text-slate-500 text-xs">
    <p></p>
</footer>

<!-- 引入游戏逻辑脚本 -->
<script src="game.js"></script>
</body>
</html>
